<template>
<div class="safelook">
  <van-nav-bar title="安全看" left-arrow @click-left="$router.back()">
    <template #right>
        <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <van-tabs v-model="active">
    <van-tab title="热卖推荐" class="remai">
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
    </van-tab>
    <van-tab title="事故案例" class="remai">
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
    </van-tab>
    <van-tab title="VR体验" class="remai">
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
    </van-tab>
    <van-tab title="课程分类" class="remai rem-kc">
        <van-button type="default">不限</van-button>
        <van-button type="default">安全知识</van-button>
        <van-button type="default">应急救援</van-button>
        <van-button type="default">安全技术</van-button>
        <van-button type="default">施工技巧</van-button>
        <van-button type="default">防火知识</van-button>
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
        <safelookzai />
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import safelookzai from './safelookzai.vue'
export default {
  components: {
    safelookzai
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.remai{
    display: flex;
    flex-wrap: wrap
}
.rem-kc{
    margin-top: 30px;
    .van-button{
       margin: 35px;
       width: 180px;
       background-color: rgb(226, 224, 224);
    }
}
</style>
